<template>
	<view class="vip-detail" :style="{ '--color': vuex_config.themeColor1, '--price': vuex_config.price }"
		v-if="dataForm.pk_id?true:false">
		<sww-swipe :list="swipeList" indicatorDots autoplay></sww-swipe>
		<view class="detail-box">
			<view class="u-line-1 u-font-30 title">{{ dataForm.name }}</view>
			<view class="title_sen">{{ dataForm.title }}</view>
			<view class="price">
				<view class="p-top">
					<view class="present-price">
						<text class="u-font-28 icon">￥</text>
						<text class="num u-font-42">{{ dataForm.price }}</text>
					</view>
					<view class="Marking-price">￥{{ dataForm.cost_price }}</view>
				</view>
				<button class="p-bottom u-reset-button" open-type="share">
					<u-icon name="zhuanfa"></u-icon>
					<text style="padding-left: 10rpx;">分享</text>
				</button>
			</view>
		</view>
		<view class="line"></view>
		<view class="parse" v-if="dataForm.details">
			<u-parse :html="dataForm.details"></u-parse>
		</view>
		<sww-goods-action>
			<view class="nav" @click="$linkTo('index')">
				<u-icon name="home" size="36"></u-icon>
				<text>首页</text>
			</view>
			<view class="nav" @click="$customer">
				<button open-type="contact" class="u-reset-button contact_btn"></button>
				<u-icon name="kefu-ermai" size="36"></u-icon>
				<text>客服</text>
			</view>
			<view class="present-price nav_price">
				<text class="u-font-28 icon">￥</text>
				<text class="num u-font-42">{{ dataForm.price }}</text>
			</view>
			<view class="btn u-font-36" @click="goBuy">立即购买</view>
		</sww-goods-action>
		<u-popup v-model="show" mode="bottom" safe-area-inset-bottom border-radius="20" closeable>
			<view class="u-p-l-30  u-p-t-30  u-p-b-30">
				<view class="u-flex">
					<image :src="dataForm.img" class="g-img"></image>
					<view class="g-box">
						<view class="g-price">价格：￥{{ dataForm.price }}</view>
						<view class="g_name">{{ dataForm.name }}</view>
					</view>
				</view>
				<view class="g-num-box ">
					<view class="g-num">数量</view>
					<u-number-box v-model="numValue" @change="valChange"
						:max="dataForm.limitpurchase > dataForm.num?dataForm.num: (dataForm.limitpurchase || dataForm.num)">
					</u-number-box>
				</view>
				<view class="g-qr" @click="buyProduct">
					<view class="g-qr-item">确认</view>
				</view>
			</view>
		</u-popup>
		<sww-login></sww-login>
	</view>
</template>

<script>
	import {
		pageShare
	} from '@/mixins/pageShare';
	import {
		uniNavigate,
		uniModal,
		uniCall
	} from '@/utils/uniPromise.js';
	import {
		formatDate
	} from '@/utils/moment/index.js';
	export default {
		mixins: [pageShare],
		data() {
			return {
				swipeList: [],
				paramsObj: {},
				dataForm: {},
				browTime: 0,
				show: false,
				numValue: 1
			};
		},
		onLoad: function(options) {
			if (options.id) {
				this.initPage(options.id);
				this.getBrowTime();
			} else {
				this.$linkTo('index');
			}
		},
		onShareAppMessage: function() {
			return this.getShareAppMessage();
		},
		onShareTimeline: function() {
			return this.getShareTimeline();
		},
		onUnload() {
			if (this.browTime && this.$isLogin()) {
				this.addBrow(this.dataForm.pk_id);
			}
		},
		methods: {
			// 记录开始浏览时间
			getBrowTime() {
				this.browTime = new Date().getTime();
			},
			// 新增浏览记录
			addBrow(prodId) {
				let date = new Date();
				let duration = parseInt((date.getTime() - this.browTime) / 1000);
				date = formatDate(date, 'YYYY-MM-DD HH:mm:ss');
				this.$resPost('AddUsersBrowse', {
					type: 6,
					product_id: prodId,
					date_time: date,
					duration: duration
				}).catch(() => {});
			},
			// 检测登录
			checkLogin() {
				return this.$login('initPage', this.dataForm.pk_id);
			},
			valChange(e) {},
			initPage(id) {
				this.$loading()
				this.$resPost('GetVipGoodsInfo', {
					pk_id: id
				}).then(({
					data
				}) => {
					if (!data.pk_id || data.status != 1) {
						return Promise.reject();
					}
					if (data.img) {
						this.swipeList = data.img.split(',').map(item => {
							let obj = {
								img: item
							};
							return obj;
						});
					}
					if (data.num <= 0) {
						this.numValue = 0
					}
					this.dataForm = data;
					this.$hide()
					this.customShareParams(); // 设置当前产品页的分享参数
				}).catch(() => {
					this.$hide();
					uniModal({
						title: '商品已下架',
						showCancel: false,
						confirmText: '我知道了'
					}).then(() => {
						this.uniBack();
					});
				})
			},
			// 设置当前产品页的分享参数
			customShareParams() {
				if (!this.shareParams.title) {
					let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
					let curRoute = routes[routes.length - 1].route; //获取当前页面路由
					let curParam = routes[routes.length - 1].options; //获取路由参数
					let obj = this.swipeList.find(item => {
						return item.img;
					});
					this.shareParams = {
						title: this.dataForm.name,
						path: curRoute,
						query: curParam,
						imgUrl: obj && obj.img ? obj.img : ''
					};
					this.onShareByH5();
				}
			},
			buyProduct() {
				if (this.numValue <= 0) {
					// 是否已选数量
					this.$toast('请先选择数量');
					return;
				}

				let params = {
					list: [{
						product_img: this.swipeList[0] ? this.swipeList[0].img : '',
						express_num: 0, // 多少起免邮费
						express_price: 0, // 快递费用
						product_freight: this.dataForm.product_freight || [], // 运费模板
						num: this.numValue,
						price: this.dataForm.price,
						product_id: this.dataForm.pk_id,
						product_name: this.dataForm.name
					}]

				}
				this.paramsObj = params

				// #ifdef   MP-ALIPAY  || MP-BAIDU

				this.$to(`/package/product/vipProd/order`)

				// #endif


				// #ifndef MP-ALIPAY || MP-BAIDU

				uniNavigate('/package/product/vipProd/order').then(res => {
					res.eventChannel.emit('acceptParams', params);
				});
				// #endif
			},
			goBuy() {
				this.checkLogin().then(() => {
					this.show = true;
				});
			},
			// 客服
			$customer() {
				// #ifdef H5
				let phone = this.vuex_business.custom_tel;
				uniCall(phone);
				// #endif
			},
		}
	};
</script>

<style lang="scss" scoped>
	.vip-detail {
		.detail-box {
			width: 100%;
			padding: 30rpx;

			.title {
				color: #333;
				font-weight: bold;
			}

			.title_sen {
				margin-top: 10rpx;
				color: #999;
			}

			.price {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 20rpx;

				.p-top {
					display: flex;
					align-items: center;
				}

				.p-bottom {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #999;
					margin-left: 0;
					margin-right: 0;
					background-color: none !important;
					border: none !important;
				}

				.Marking-price {
					text-decoration: line-through;
					font-size: 24rpx;
					color: #ccc;
					margin-left: 10rpx;
					position: relative;
					top: 4rpx;
				}
			}
		}

		.present-price {
			color: var(--price);

			.icon {
				font-size: 28rpx;
				font-weight: bold;
			}

			.num {
				font-weight: bold;
			}
		}

		.g-img {
			width: 140rpx;
			height: 150rpx;
			border-radius: 20rpx;
		}

		.g-box {
			margin-top: auto;
			margin-left: 20rpx;
		}

		.g-price {
			color: $sww-theme-price;
		}

		.g_name {
			margin: 8rpx 0;
		}

		.g-num-box {
			margin: 30rpx 0;
		}

		.g-num {
			margin-bottom: 30rpx;
		}

		.g-qr {
			padding-right: 30rpx;
			box-sizing: border-box;
		}

		.g-qr-item {
			width: 100%;
			background-color: var(--color);
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			text-align: center;
			margin: 60rpx auto 0;
		}

		.line {
			width: 100%;
			height: 10rpx;
			background-color: #f3f3f3;
		}

		.parse {
			padding: 30rpx;
		}


		.nav {
			display: flex;
			flex: 1;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;

			.contact_btn {
				position: absolute;
				top: 0;
				left: 24rpx;
				width: 70rpx;
				height: 70rpx;
			}
		}

		.nav_price {
			margin-right: 20rpx;
		}

		.btn {
			flex: 3;
			background-color: red;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-weight: bold;
		}
	}
</style>
